import React, { useCallback } from 'react';
import {
	Box,
	Stack,
	FormControl,
	InputGroup,
	InputLeftElement,
	Input,
	Icon,
	Button,
	Text,
	HStack,
	Checkbox,
	// useColorModeValue,
} from '@chakra-ui/react';
import { FiUser, FiLock } from 'react-icons/fi';
import { AiOutlineWeiboCircle, AiOutlineWechat, AiOutlineQq } from 'react-icons/ai';
import axios from '../../../service/index.js';

export default function SignIn() {

	const onSubmitToEnd = useCallback(() => {
		axios.post('users/login', {
			"user":{    
				"email": "jake@jake.jake",   
				"password": "jakejake"
			}
		}).then(res => {
			console.log(res);
		}).catch(console.error);
	}, []);

	return (
		<Box>
			<Stack spacing="15px">
				<Box bg="rgba(181, 181, 181, 0.1)" borderRadius="4px" border="1px solid #c8c8c8">
					<FormControl>
						<InputGroup>
							<InputLeftElement
								pointerEvents="none"
								children={<Icon as={FiUser}></Icon>}
							/>
							<Input placeholder="手机号或邮箱" maxLength="11" variant="flushed"></Input>
						</InputGroup>
					</FormControl>
					<FormControl>
						<InputGroup>
							<InputLeftElement
								pointerEvents="none"
								children={<Icon as={FiLock}></Icon>}
							/>
							<Input placeholder="密码" maxLength="16" variant="flushed"></Input>
						</InputGroup>
					</FormControl>
				</Box>
				<HStack justifyContent="space-between">
					<Checkbox _focus={{boxShadow: "none"}}>记住我</Checkbox>
					<Text as="a" color="#999">登录遇到问题?</Text>
				</HStack>
				<Button onClick={onSubmitToEnd} bg="customize.login" borderRadius="full" color="White" _focus={{boxShadow: "none"}}>登录</Button>
			</Stack>
			<Stack mt="40px">
					<HStack className="more-sign" justifyContent="center">
						<Text as="h6" fontSize="12px" color="#b5b5b5" mb="10px">社交帐号直接注册</Text>
					</HStack>
					<HStack justifyContent="center">
						<Icon cursor="pointer" fontSize="28px" color="#e05244" as={AiOutlineWeiboCircle}></Icon>
						<Icon cursor="pointer" fontSize="28px" color="#00bb29" as={AiOutlineWechat}></Icon>
						<Icon cursor="pointer" fontSize="28px" color="#498ad5" as={AiOutlineQq}></Icon>
					</HStack>
				</Stack>
		</Box>
	)
}
